<!--  -->
<template>
  <div class="order-list" v-loading="loading">
      <HeaderTop title="商品管理"></HeaderTop>
      <div class="order-container">
        <div class="order-search">
          <!-- 交易时间 -->
          <div class="order-date">
            <el-input placeholder="商品名称" prefix-icon="el-icon-search" v-model="goodsInp"></el-input>
          </div>
          <!-- 价格区间 -->
          <div class="order-price">
            <span class="title">价格：</span>
            <el-input class="price-item" v-model="startPrice"></el-input>
            <span class="price-span">——</span>
            <el-input class="price-item" v-model="endPrice"></el-input>
          </div>
          <!-- 状态 -->
          <div class="order-state">
            <span class="title">状态：</span>
            <el-select class="state-option" v-model="goodState" placeholder="请选择">
              <el-option
                v-for="item in stateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> 
          </div>
          <el-button class="order-btn" plain @click="getGoodsList(1)">搜索</el-button>
          <el-button class="order-add" @click="formModal=true; curr='new'" icon="el-icon-plus">添加商品</el-button>
        </div>

        <div class="order-mian">
          <!-- 订单表格 -->
          <!-- <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" max-height="700" class="order-table" style="width: 100%"> -->
          <el-table :data="tableData.goodsInfos" min-height="708" max-height="708" class="order-table" style="width: 100%">
            <el-table-column prop="goodsNo" label="商品编号"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称"></el-table-column>
            <el-table-column label="图片">
              <template slot-scope="scope">
                <img :src="scope.row.cartImg" style="width: 100px; height: 100px">
              </template>
            </el-table-column>
            <el-table-column prop="price" label="单价(元)"></el-table-column>
            <el-table-column prop="saleVolume" label="总销量"></el-table-column>
            <el-table-column prop="stock" label="库存"></el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.status == 0">关闭</el-tag>
                <el-tag type="success" v-if="scope.row.status == 1">开启</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="class" label="所属分类"></el-table-column>
            <el-table-column label="属性">
              <template slot-scope="scope">
                <span v-if="scope.row.theme == 1">养生组合茶</span>
                <span v-if="scope.row.theme == 2">养生单味茶</span>
                <span v-if="scope.row.theme == 3">养生糕点</span>
                <span v-if="scope.row.theme == 4">养生食品</span>
                <span v-if="scope.row.theme == 5">其他养生系列</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="showForm(scope.row); curr='old'" size="small">查看 / 编辑</el-button>
                <!-- <el-button type="text" @click="editForm(scope.row)" size="small">编辑</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pagesize"
              layout="total, prev, pager, next, jumper"
              :total="count">
            </el-pagination>
          </div>
        </div>
      </div>

      <Modal 
        class="formModal"
        v-model="formModal"
        width="1014"
        height="669"
        @on-cancel="toCleanForm"
        :mask-closable="false"
        :styles="{top:'100px',left:'180px'}">
        <p slot="header" style="width:1012px;height:62px;line-height:62px;font-size:18px;background:rgb(250,250,250);padding:0;border-bottom:1px solid #E0E0E0">
          <span>商品</span>
        </p>
        <el-form class="form1" size="mini" :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
          <el-form-item label="商品名称" prop="goodsName">
            <el-input class="input1" v-model="ruleForm.goodsName" style="width:334px"></el-input>
          </el-form-item>
          <el-form-item label="库存" prop="stock">
            <el-input class="input1" v-model="ruleForm.stock" style="width:334px"></el-input>
          </el-form-item>
          <el-form-item label="商品编号" prop="goodsNo">
            <el-input class="input1" v-model="ruleForm.goodsNo" style="width:334px"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input class="input1" v-model="ruleForm.price" style="width:334px"></el-input>
          </el-form-item>
          <el-form-item label="商品描述" prop="goodsDescribe">
            <el-input v-model="ruleForm.profile" style="width:334px"></el-input>
          </el-form-item>
          <el-form-item label="总销量" prop="totalSalesNum">
            <el-input v-model="ruleForm.saleVolume" style="width:91px"></el-input>
          </el-form-item>
          <el-form-item label="运费" prop="freight">
            <el-input v-model="ruleForm.espressFee" style="width:91px"></el-input>
          </el-form-item>
          <el-form-item label="所属分类" prop="classify">
            <el-select
              v-model="classify"
              placeholder="请选择"
              @change="getUnit"
              style="width: 100px">
              <el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select
              v-model="ruleForm.categoryId"
              placeholder="请选择"
              style="width: 100px">
              <el-option v-for="item in options2" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计量单位">
            <el-select v-model="ruleForm.unitName" placeholder="请选择">
              <el-option v-for="item in unitOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="属性分类" prop="property">
            <el-select v-model="ruleForm.theme" placeholder="请选择" style="width:160px">
              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="添加为新品上市" prop="newGoods">
            <el-radio-group  v-model="ruleForm.isNew">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="添加为热卖专区" prop="hotGoods">
            <el-radio-group v-model="ruleForm.isHot">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否上架" prop="canSale">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 上传图片 -->
          <div style="background:#E0E0E0;margin:0 20px;
            height:34px;padding-left:20px;line-height:34px">图片与描述</div>
          <el-form-item prop="canSale" >
            <div class="wrapper" style="display:flex;font-size:12px;margin-left:30px">
              <div style="width:80px;margin-top:80px;font-size:14px">图片展示:</div>
              <!-- 购物车缩略图 -->
              <div style="width:107px;margin-right:15px;">
                <p style="text-align:center"><span style="color:red;">*</span>购物车缩略图</p>
                <UploadFileView
                  v-model="ruleForm.cartImg"
                  v-if="formModal"
                  :url="cartUrl"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽210px,高210px</p>
              </div>
              <!-- 封面图 -->
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center"><span style="color:red;">*</span>封面图</p>
                <UploadFileView
                  v-model="ruleForm.coverImg"
                  v-if="formModal"
                  :url="coverUrl"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽296px,高372px</p>
              </div>
              <!-- 商品图1 -->
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center"><span style="color:red;">*</span>商品图1</p>
                <UploadFileView
                  v-model="ruleForm.headImg1"
                  v-if="formModal"
                  :url="goodsUrl1"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽750px,高500px</p>
              </div>
              <!-- 商品图2 -->
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center"><span style="color:red;">*</span>商品图2</p>
                <UploadFileView
                  v-model="ruleForm.headImg2"
                  v-if="formModal"
                  :url="goodsUrl2"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽750px,高500px</p>
              </div>
              <!-- 商品图3 -->
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center"><span style="color:red;">*</span>商品图3</p>
                <UploadFileView
                  v-model="ruleForm.headImg3"
                  v-if="formModal"
                  :url="goodsUrl3"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽750px,高500px</p>
              </div>
              <!-- 商品图4 -->
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center"><span style="color:red;">*</span>商品图4</p>
                <UploadFileView
                  v-model="ruleForm.headImg4"
                  v-if="formModal"
                  :url="goodsUrl4"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽750px,高500px</p>
              </div>
              <!-- 商品图5 -->
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center"><span style="color:red;">*</span>商品图5</p>
                <UploadFileView
                  v-model="ruleForm.headImg5"
                  v-if="formModal"
                  :url="goodsUrl5"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽750px,高500px</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="canSale" >
            <div class="wrapper" style="display:flex;font-size:12px;margin-left:30px">
              <!-- 详情图片 -->
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center">详情图片1</p>
                <UploadFileView
                  v-model="ruleForm.detailImg1"
                  v-if="formModal"
                  :url="detailUrl1"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽660px,高660px</p>
              </div>
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center">详情图片2</p>
                <UploadFileView
                  v-model="ruleForm.detailImg2"
                  v-if="formModal"
                  :url="detailUrl2"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽660px,高660px</p>
              </div>
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center">详情图片3</p>
                <UploadFileView
                  v-model="ruleForm.detailImg3"
                  v-if="formModal"
                  :url="detailUrl3"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽660px,高660px</p>
              </div>
              <div style="width:107px;margin-right:15px">
                <p style="text-align:center">详情图片4</p>
                <UploadFileView
                  v-model="ruleForm.detailImg4"
                  v-if="formModal"
                  :url="detailUrl4"
                  style="width: 107px; height:107px"/>
                <p style="color:#B1B1B1;line-height:12px"><span style="display:block"></span>宽660px,高660px</p>
              </div>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </div>
          </el-form-item>
          <!-- 产品参数 -->
          <div class="productParam" style="display:flex;margin-left:30px">
            <div class="left" style="width:10%;margin-top:5px;font-size:14px">产品参数：</div>
            <div>
              <el-form-item label-width="70px" label="包装方式" prop="goodsDescribe">
                <el-input v-model="ruleForm.packing" style="width:100px"></el-input>
              </el-form-item>
              <el-form-item label-width="70px" label="茶种类" prop="goodsDescribe">
                <el-input v-model="ruleForm.teaType" style="width:100px"></el-input>
              </el-form-item>
              <el-form-item label-width="70px" label="产地" prop="goodsDescribe">
                <el-input v-model="ruleForm.productionPlace" style="width:100px"></el-input>
              </el-form-item>
              <el-form-item label-width="70px" label="是否含糖" prop="goodsDescribe">
                <el-input v-model="ruleForm.isSugary" style="width:100px"></el-input>
              </el-form-item>
              <el-form-item label-width="70px" label="系列" prop="goodsDescribe">
                <el-input v-model="ruleForm.series" style="width:100px"></el-input>
              </el-form-item>
              <el-form-item label-width="70px" label="净含量" prop="goodsDescribe">
                <el-input v-model="ruleForm.weights" style="width:100px"></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div slot="footer">
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        </div>
      </Modal>

  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop.vue'
import UploadFileView from '@/components/UploadFile/UploadFileView'
export default {
  data () {
    return {
      curr: '',
      count: 0,
      loading: false,
      classify: '',
      shopcartImgUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      radio1: 2,
      radio2: 1,
      radio3: 2,
      ruleForm:{
        goodsName: '', // 商品名称
        stock: '', // 库存
        goodsNo: '', // 商品编号
        price: '', // 封面价格
        profile: '', // 货品简介
        saleVolume: '', // 
        espressFee: '', // 快递费
        categoryId: '', // 所属分类id
        unitName: '', // 计量单位
        theme: '', // 属性分类id
        isNew: '', // 是否新品
        isHot: '', // 是否热销
        status: '', // 是否上架
        packing: '', // 包装方式
        teaType: '', // 茶种类
        productionPlace: '', // 生产地点
        isSugary: '', // 是否含糖
        series: '', // 系列
        weights: '', // 净重量
        cartImg: '', // 购物车缩略图
        coverImg: '', // 封面图
        headImg1: '', // 商品图
        headImg2: '', // 商品图
        headImg3: '', // 商品图
        headImg4: '', // 商品图
        headImg5: '', // 商品图
        detailImg1: '', // 详情图
        detailImg2: '', // 详情图
        detailImg3: '', // 详情图
        detailImg4: '', // 详情图
      },
      cartUrl: '', // 购物车缩略图
      coverUrl: '', // 封面图
      goodsUrl1: '', // 商品图
      goodsUrl2: '', // 商品图
      goodsUrl3: '', // 商品图
      goodsUrl4: '', // 商品图
      goodsUrl5: '', // 商品图
      detailUrl1: '', // 详情图
      detailUrl2: '', // 详情图
      detailUrl3: '', // 详情图
      detailUrl4: '', // 详情图
      rules:{
        goodsName:[
          {required:true,message:'请输入商品名称',trigger:'blur'}
        ],
        stock:[
          {required:true,message:'请输入商品库存',trigger:'blur'}
        ],
        goodsNo:[
          {required:true,message:'请输入商品编号',trigger:'blur'}
        ],
        price:[
          {required:true,message:'请输入商品价格',trigger:'blur'}
        ],
      },
      formModal: false,
      currentPage: 1,
      pagesize: 5,
      goodsInp: '',
      startPrice: '',
      endPrice: '',
      goodState: '',
      unitOptions: [{
        value: '盒',
        label: '盒'
      }, {
        value: '袋',
        label: '袋'
      }, {
        value: '包',
        label: '包'
      }],
      options1: [],
      options2: [],
      stateOptions: [{
        value: '0',
        label: '关闭'
      }, {
        value: '1',
        label: '开启'
      }],
      options3: [{
        value: 1,
        label: '养生组合茶'
      }, {
        value: 2,
        label: '养生单味茶'
      }, {
        value: 3,
        label: '养生糕点'
      }, {
        value: 4,
        label: '养生食品'
      }, {
        value: 5,
        label: '其他养生系列'
      }],
      tableData: []
    };
    
  },

  components: {
    HeaderTop,
    UploadFileView
  },

  created () {
    console.log(sessionStorage.getItem('token'))
    this.getGoodsList(1)
    this.getUnit(0)
  },

  methods: {
    async getUnit (id) {
      const params = {
        token: sessionStorage.getItem('token'),
        managerInfoId: sessionStorage.getItem('userId'),
        parentId: id
      }
      const result = await this.API.reqSelectGoodsCategoryList(params)
      console.log('000', result)
      if (id == 0) {
        this.options1 = result.retData
        console.log(111,this.options1)
      } else if (id != 0) {
        this.options2 = result.retData
        console.log(222,this.options2)
      }
    },
    async getGoodsList (page) {
      const params = {
        token: sessionStorage.getItem('token'),
        goodsName: this.goodsInp,
        startPrice: this.startPrice,
        endPrice: this.endPrice,
        status: this.goodState,
        managerInfoId: sessionStorage.getItem('userId'),
        num: page,
        size: this.pagesize
      }
      console.log(params)
      this.loading = true
      const result = await this.API.reqConditionGoodsInfos(params)
      console.log('测试列表数据', result)
      console.log('商品列表',result.retData)
      this.loading = false
      if (result.retCode !== '000') {
        return false
      }
      this.tableData = result.retData
      this.count = result.retData.count
    },
    async showForm (item) {
      // ldq - 更换模态框渲染顺序
      this.formModal = true
      const params = {
        token: sessionStorage.getItem('token'),
        managerInfoId: sessionStorage.getItem('userId'),
        goodsInfoId: item.id
      }
      const result = await this.API.reqSelectGoodsInfo(params)
      console.log('弹框', result)
      this.ruleForm = result.retData.goodsInfo
      this.cartUrl = result.retData.goodsInfo.cartImg
      this.coverUrl = result.retData.goodsInfo.coverImg
      // zml - 增加商品片轮播\
      this.goodsUrl1 = result.retData.goodsInfo.headImg1 ? result.retData.goodsInfo.headImg1 : ''
      this.goodsUrl2 = result.retData.goodsInfo.headImg2 ? result.retData.goodsInfo.headImg2 : ''
      this.goodsUrl3 = result.retData.goodsInfo.headImg3 ? result.retData.goodsInfo.headImg3 : ''
      this.goodsUrl4 = result.retData.goodsInfo.headImg4 ? result.retData.goodsInfo.headImg4 : ''
      this.goodsUrl5 = result.retData.goodsInfo.headImg5 ? result.retData.goodsInfo.headImg5 : ''
      // this.goodsUrl = result.retData.goodsInfo.goodsImg
      // zml - 判断是否为null
      this.detailUrl1 = result.retData.goodsDetails[0] ? result.retData.goodsDetails[0].detailImg : ''
      this.detailUrl2 = result.retData.goodsDetails[1] ? result.retData.goodsDetails[1].detailImg : ''
      this.detailUrl3 = result.retData.goodsDetails[2] ? result.retData.goodsDetails[2].detailImg : ''
      this.detailUrl4 = result.retData.goodsDetails[3] ? result.retData.goodsDetails[3].detailImg : ''
      // zml - 判断完毕
      this.classify = result.retData.parentGoodsCategory.id
      this.getUnit(this.classify)
      this.currGoodId = result.retData.goodsInfo.id
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getGoodsList(currentPage)
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const formData = new FormData()
          for (let key in this.ruleForm) {
            formData.append(key, this.ruleForm[key])
            console.log(key, this.ruleForm[key])
          }
          formData.append('managerInfoId', sessionStorage.getItem('userId'))
          if (this.curr == 'old') {
            formData.append('goosId', this.currGoodId)
            formData.append('isUpdate', 0)
          } else {
            formData.append('isUpdate', 1)
          }
          formData.append('token', sessionStorage.getItem('token'))
          const result = await this.API.reqAddOrUpdateGoods(formData)
          console.log(result)
          this.formModal = false
          this.getGoodsList(this.currentPage)
          this.toCleanForm()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    toCleanForm () {
      this.classify = ''
      this.ruleForm = {
        goodsName: '', // 商品名称
        stock: '', // 库存
        goodsNo: '', // 商品编号
        price: '', // 封面价格
        profile: '', // 货品简介
        saleVolume: '', // 
        espressFee: '', // 快递费
        categoryId: '', // 所属分类id
        unitName: '', // 计量单位
        theme: '', // 属性分类id
        isNew: '', // 是否新品
        isHot: '', // 是否热销
        status: '', // 是否上架
        packing: '', // 包装方式
        teaType: '', // 茶种类
        productionPlace: '', // 生产地点
        isSugary: '', // 是否含糖
        series: '', // 系列
        weights: '', // 净重量
        cartImg: '', // 购物车缩略图
        coverImg: '', // 封面图
        headImg1: '', // 商品图
        headImg2: '', // 商品图
        headImg3: '', // 商品图
        headImg4: '', // 商品图
        headImg5: '', // 商品图
        detailImg1: '', // 详情图
        detailImg2: '', // 详情图
        detailImg3: '', // 详情图
        detailImg4: '', // 详情图
      }
      this.cartUrl = ''
      this.coverUrl = ''
      this.goodsUrl = ''
      this.detailUrlMap = ''
      this.detailUrl1 = ''
      this.detailUrl2 = ''
      this.detailUrl3 = ''
      this.detailUrl4 = ''
      this.goodsUrl1 = '' // 商品图
      this.goodsUrl2 = '' // 商品图
      this.goodsUrl3 = '' // 商品图
      this.goodsUrl4 = '' // 商品图
      this.goodsUrl5 = '' // 商品图
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.shopcartImgUrl = URL.createObjectURL(file.raw);
    },
  }
}

</script>
<style lang='stylus'>
  .ivu-modal-mask
    background rgba(210,210,210,.1)
  .ivu-modal-content
    overflow hidden
    .ivu-modal-header
      padding 0
      border none
      span
        margin-left 10px
        font-weight bold
    .ivu-modal-footer
      border none
  .el-table .cell
    text-align center !important
</style>

<style>
.shopcart .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .shopcart .el-upload:hover {
    border-color: #145B3E;
  }
  .shopcart-icon {
    font-size: 28px;
    color: #8c939d;
    width: 107px;
    height: 107px;
    line-height: 107px;
    text-align: center;
  }
  .shopcartImg {
    width: 107px;
    height: 107px;
    display: block;
  }
  .cardUl .el-upload--picture-card{
    margin-top:30px;
    width: 107px;
    height: 107px;
  }
  .cardUl .el-upload-list--picture-card .el-upload-list__item{
    margin-top:30px;
    width: 107px;
    height: 107px;
  }
</style>

<style lang='stylus' scoped>
.order-list
  height 100%
  .order-container
    height 100%
    .order-search
      position relative
      height 90px
      display flex
      align-items center
      .order-price
        display flex
        align-items center
        .price-item
          width 100px
        .price-span
          color #fff
          padding 0 10px
      .title
        color #fff
        font-size 19px
      .order-state,
      .order-price,
      .order-btn
        margin-left 25px
      .order-state
        .state-option
          width 120px
      .order-add
        position absolute
        right 30px
    .order-mian
      position relative
      height 763px
      .order-table
        border-top-left-radius 15px
        border-top-right-radius 15px
      .block
        position absolute
        bottom 10px
        margin-left 400px
  .ldq-upload-div
    width 107px
    height 107px
</style>